{% extends 'myadmin/index.html' %}
{% block con %}
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form action="{% url 'user_add_post' %}" method="POST" enctype="multipart/form-data"
                          class="am-form tpl-form-line-form">
                        {% csrf_token %}
                        <div class="card-header">
                            <div class="card-title">会员添加</div>
                        </div>

                        <div class="card-body">
                            <div class="form-group">
                                <label>昵称</label>
                                <input type="text" class="form-control" name="nikename" placeholder="请输入昵称">
                                <small id="emailHelp" class="form-text text-muted">请输入个性的昵称
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="请输入密码">
                            </div>

                            <div class="form-group">
                                <label for="password">手机号</label>
                                <input type="text" class="form-control" id="phone" name="phone"
                                       placeholder="请输入手机号">
                            </div>

                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                            </div>

                            <div class="form-group">
                                <label for="email">年龄</label>
                                <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
                            </div>

                            <div class="form-check">
                                <label>性别</label><br/>
                                <label class="form-radio-label">
                                    <input class="form-radio-input" type="radio" name="sex" value="0"
                                           checked="">
                                    <span class="form-radio-sign">女</span>
                                </label>
                                <label class="form-radio-label ml-3">
                                    <input class="form-radio-input" type="radio" name="sex" value="1">
                                    <span class="form-radio-sign">男</span>
                                </label>
                            </div>


                            <div class="form-group">
                                <div class="am-form-group am-form-file">
                                    <div class="tpl-form-file-img">
                                        <img id="showImg" style="width: 200px;" src="assets/img/a5.png" alt="">
                                    </div>
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 添加头像
                                    </button>
                                    <input id="ReadFile" name="pic" type="file" multiple="">
                                </div>
                            </div>
                            <script src="/static/myadmin/assets/js/jquery-1.8.3.min.js"></script>
                            <script type="text/javascript">
                            $('#ReadFile').change(function(){
                                var file = this.files[0];

                                //限定上传文件的类型，判断是否是图片类型
                                if (!/image\/\w+/.test(file.type)) {
                                    alert("只能选择图片");
                                    return false;
                                }
                                var reader = new FileReader();
                                reader.readAsDataURL(file);
                                reader.onload = function(e) {
                                    base64Code = this.result;
                                    //把得到的base64赋值到img标签显示
                                    $("#showImg").attr("src", base64Code);
                                }
                            })


                            </script>
                        </div>
                        <div class="card-action">
                            <button class="btn btn-success">添加</button>
                            <input class="btn btn-danger" type="reset" value="重置"/>
                        </div>
                </div>
                </form>
            </div>

        </div>
    </div>
</div>
</div>
{% endblock %}